<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <!-- 左侧插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右侧插槽 -->
      <template #right>
        <van-button icon="search" type="primary" round @click="$router.push('/search')"> 搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- 上拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 下拉列表 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push({path:'/article',query:{id:item.art_id}})">
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                      <van-image
                        :src="value"
                          lazy-load
                      />
                    </van-grid-item>
                  </van-grid>
                  <div>
                    <span>{{item.aut_name}}</span>&nbsp; 
                    <span>{{item.comm_count}}评论</span>&nbsp;
                    <span>{{item.pubdate | fromNow}}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import cell from '../../../知识点/具名插槽/cell.vue'
import { getChannelList ,getArticleList } from './home.js'
// 导入moment
import moment from 'moment'
// 设置语音
moment.locale('zh-cn')
export default {
  // components: { cell },
  name: 'home',
  data () {
    return {
      active: 0,
      loading: false, //上拉 加载更多动画
      finished: false, //上拉  加载全部数据开关
      list: [], //列表数据
      isLoading: false, //下拉 刷新动画
      channels :[],//频道列表 
      timestamp :null,//时间戳

    }
  },
  async created() {
    let res = await getChannelList()
    console.log(res);
    this.channels = res.data.data.channels
  },
  methods: {
    /* 1.上拉加载更多 */
    async onLoad () {
     
      // 2.加载文章列表
      // 2.1判断是不是第一页
      if(!this.timestamp){
        this.timestamp = Date.now()
      }
      // 2.2请求数据
      let res = await getArticleList({
        channel_id : this.channels[this.active].id,
        timestamp : this.timestamp
      })
      // 2.3绑定数据
      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res);

      //2.4关闭加载动画
      this.loading = false
      // 2.5最多50条，如果所有元素加载完毕，则停止滚动
      if(this.list.length >=50){
        this.finished = true
      }
    },
    /* 2.下拉刷新事件 */
    onRefresh () {
      // 清空时间戳，作用是下拉
      this.timestamp = null
      // (0)一旦下拉刷新，无法修改上拉列表finished=false
      // 不写这行代码  一旦拉倒底部，再下拉刷新就无法请求第二页数据
      this.finished = false
      // (1)清空当前数据
      this.list = []
      // (2)重新加载数据   如果不写这行代码 ，就无法看到底部加载第二页动画
      this.loading = true
      this.onLoad()
      // (3)关闭下拉刷新动画，否则顶部动画会一直转圈   如果不写这行代码，顶部下拉刷新组件动画会一直转圈
      this.isLoading = false
    },
    /* 3.tab栏点击 */
    tabClick(){
      // tab栏点击相当于下拉刷新请求新的数据
      this.onRefresh()
    }
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar {
    z-index: 10;
    //顶部栏
    .van-nav-bar__content {
      background-color: #029dfa;
      .logo {
        width: 100px;
        /* 注意点
        1.如果在背景图中使用@，则会默认在前面加一个./@导致项目运行报错
        2.解决:在@前面添加波浪号~取消前面的./
        ~@
        */
        height: 30px;
        background: url('~@/assets/logo.png');
        background-size: cover;
      }
      .van-button {
        width: 100px;
        height: 30px;
        background-color: #00affd;
        border: 1px solid transparent;
        .van-icon {
          color: #fff;
        }
      }
    }
  }

  /* 2.tab栏 */
  //头部区域
  .van-tabs {
    .van-tabs__wrap {
      position: fixed;
      top: 46px;
      /* 添加层级避免被覆盖 */
      z-index: 10;
      // 给宽度的作用是自动滚动
      width: 100%;
    }
    //底部内容
    .van-tabs__content {
      //解决tabs头部固定定位脱标遮挡标准流
      margin-top: 44px;
      /* 设置margin-bottom与底部对齐。这样盒子的高度就限制了。刚好卡在两个盒子中间 */
      margin-bottom: 0px;
    }
  }
}
</style>
